<template>
  <el-collapse-transition name="el-zoom-in-top">
    <el-alert
        title="该表仅包含您所属部门的员工，无法跨部门管理"
        type="warning"
        show-icon
        @close="close_alert"
        ref="alert"
        v-show="alert_show"
    >
    </el-alert>
  </el-collapse-transition>
  <el-table
      :data="tableData"
      style="width: 100%"
      :cell-style="avatar_style"
  >
    <el-table-column
        width="120"
    >
      <template #default="scope">
        <el-avatar :size="50" :src="scope.row.src"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
    >
    </el-table-column>
    <el-table-column
        prop="phone_num"
        label="电话号码"
        width="180">
    </el-table-column>
    <el-table-column
        prop="sex"
        label="性别">
    </el-table-column>
    <el-table-column
        prop="position"
        label="职位"
        width="180">
    </el-table-column>
    <el-table-column
        prop="enter_time"
        label="入职时间">
    </el-table-column>
    <el-table-column
        prop="salary"
        label="目前薪水">
    </el-table-column>
    <el-table-column
        width="180"
        label="员工评分">
      <template #default="scope">
        <el-rate
            v-model="scope.row.score"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column
        align="right">
      <template #header>
        <el-input
            v-model="search_value"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
      <template #default="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">查看
        </el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      top="3vh"
      v-model="first_dialog"
      custom-class="show_dialog"
  >
    <template #title>
      <h2 style="font-size: 1.8rem">员工介绍</h2>
    </template>
    <div style="height: 66vh; overflow:auto;">
      <el-row class="show_dialog_data">
        <el-col :span="20">
          <h3 style="font-weight: normal;text-align: left;font-size: 1.5rem">{{ show_data.name }}</h3>
          <ul>
            <li>{{ show_data.phone_num }}</li>
            <li>{{ show_data.sex }}</li>
            <li>{{ show_data.position }}</li>
            <li>{{ show_data.enter_time }}</li>
            <li>
              <el-rate
                  :model-value="show_data.score"
                  disabled
                  show-score
                  text-color="#ff9900"
              ></el-rate>
            </li>
          </ul>
        </el-col>
        <el-col :span="2">
          <el-image :src="show_data.src" style="width: 100%"></el-image>
        </el-col>
      </el-row>
      <el-row>
        <el-divider
            content-position="left">专业技能
        </el-divider>
        <div
            style="text-align: left;text-indent: 2rem;line-height: 1.5rem;font-size: 16px"
            v-html="show_data.skills"></div>
      </el-row>
      <el-row>
        <el-divider content-position="left">教育经历</el-divider>
        <el-timeline class="" v-if="show_data.exps.length!==0" style="text-align: left;display: block;width: 95%;margin: 0 auto">
          <el-timeline-item :timestamp="item.xueli" placement="bottom" v-for="item in show_data.exps"
                            :key="item.xueli"
                            :color="'rgb('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')'"
          >
            <span v-html="item.schoolName+'\t\t'+item.majorName"></span>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="尚无数据" style="width: 100%"></el-empty>
      </el-row>
      <el-row>
        <el-divider content-position="left">项目经历</el-divider>
        <template v-if="show_data.items.length!==0">
          <el-card shadow="hover" v-for="item in show_data.items" :key="item" :body-style="{padding:'18px 20px'}">
            <template #header>
              <span style="font-size: 20px">{{ item.item_name }} ---- {{ item.item_work }}</span>
            </template>
            <el-row class="item">
              <el-col :span="24">
                <div style="width: 100%;margin: 0 auto;text-align: left;text-indent: 2rem;line-height: 1.5rem"
                     v-html="item.item_intro"></div>
              </el-col>
            </el-row>
          </el-card>
        </template>
        <el-empty v-else description="尚无数据" style="width: 100%"></el-empty>
      </el-row>
    </div>
    <el-dialog
        width="40%"
        top="5vh"
        v-model="sec_dialog"
        append-to-body>
      <template #title>
        <el-row style="">
          <el-col :span="5"><h3 style="font-size: 24px;">员工评价</h3></el-col>
          <el-col :span="8" class="both_center">
            <el-rate
                :model-value="show_data.score"
                disabled
                show-score
                text-color="#ff9900"
            ></el-rate>
          </el-col>
          <el-col :span="10">
            <el-button type="text" @click="third_dialog = true">新建评价</el-button>
          </el-col>
        </el-row>
      </template>
      <div style="max-height: 70vh;overflow-y: auto;">
        <el-timeline>
          <el-timeline-item
              :timestamp="item.timestamp"
              placement="top"
              v-for="item in show_data.rate_detail"
              :key="item.timestamp"
              :type="parseFloat(item.score)<=2.5?'danger':parseFloat(item.score)<=3.5?'warning':parseFloat(item.score)<=4?'primary':'success'"
          >
            <el-card
                class="item_card"
                :body-style="{padding:'8px 10px'}"
            >
              <template #header>
                <el-rate
                    :model-value="item.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                ></el-rate>
              </template>
              <div v-html="item.detail"></div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-dialog
          top="3vh"
          width="70%"
          v-model="third_dialog"
          append-to-body
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :title="'新建评价——'+show_data.name"
          custom-class="third_dialog"
      >
        <template #default style="padding-top: 0" class="123">
          <div style="height: 78vh">
            <el-collapse-transition name="el-zoom-in-top">
              <el-alert
                  title="该表填写内容将永久保存，平台将保留追责权利，请理性填写"
                  type="warning"
                  show-icon
                  @close="third_dialog_alert_show=false"
                  ref="alert"
                  v-show="third_dialog_alert_show"
              >
              </el-alert>
            </el-collapse-transition>
            <el-row style="margin: 15px 0" class="">
              <el-col :span="3" class="both_center">
                <span style="font-weight: bold;">请根据近期表现打分:</span>
              </el-col>
              <el-col :span="4" class="both_center">
                <el-tooltip class="item" effect="light" content="请在右侧输入框内填写分数" placement="top">
                  <el-rate
                      v-model="new_rate.score"
                      allow-half
                      disabled
                      text-color="#ff9900"
                  >
                  </el-rate>
                </el-tooltip>
              </el-col>
              <el-col :span="4">
                <el-input-number
                    v-model="new_rate.score"
                    :precision="1"
                    :step="0.1"
                    :max="5"
                    :min="0"
                    size="mini"
                    controls-position="right"
                    style="color: #ff9900"
                ></el-input-number>
              </el-col>
              <el-col :span="1" class="both_center">
                <el-button type="primary" size="mini" @click="submit_data">提交</el-button>
              </el-col>
            </el-row>
            <edit_panel :height="480" v-model="new_rate.detail"></edit_panel>
          </div>
        </template>
      </el-dialog>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="first_dialog = false">关闭</el-button>
        <el-button type="primary" @click="sec_dialog = true">企业评价</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import edit_panel from "@/components/edit_panel";

export default {
  emits: ['title'],
  name: "company_admin_gszg",
  data() {
    return {
      first_dialog: false, sec_dialog: false, third_dialog: false,
      tableData: [
        {
          src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/49',
          name: '职员1',
          phone_num: '13700000000',
          sex: '男',
          position: 'CTO',
          enter_time: '2022.2',
          salary: '20000',
          score: '4.4',
          skills: '<p>掌握C、Java、Python等语言，参加竞赛以C++为主，日常开发以Python为主</p><p>掌握爬虫、数据分析、数据挖掘等技术，借助相关技术抓取教务系统接口开发相关网站为同学提供便利</p><p>掌握H5、CSS3等技术，独自开发多个网站，其中包括完整电商网站、信息发布网站等，后端使用Django开发</p>',
          exps: [
            {
              xueli: '本科',
              schoolName: '山东财经大学',
              majorName: '计算机科学与技术',
            },
            {
              xueli: '研究生',
              schoolName: '清华大学',
              majorName: '计算机科学与技术',
            },
          ],
          items: [
            {
              item_name: '集采优鲜-冷链电商',
              item_work: '网站开发',
              item_intro: '<p>“集采优鲜”是我们创业团队针对大学校园消费群体对生鲜果蔬类农产品的购物细分市场推出的电子商务平台，平台采用集中采购、集中配送的方式降低采购及配送成本，前期以采购山东省内生鲜果蔬为主，以山东财经大学圣井校区1万余人为示范，采取以校区为单元的营销和配送单位，每个校区设置一个采购平台和运营配送中心，后期逐渐网络化、规模化。平台构建了农村家庭（农户）-集中采购供应链运输（第三方）-终端配送（高校服务站）的全链条服务体系，同时采用信息化平台和物联网设备及追溯技术实现了农产品从种植、采摘到运输、配送的全过程监管。</p><p>平台为高校师生提供优质的服务，不仅可以降低30%的果蔬农产品采购成本，还可以从源头把控品质，努力为新冠肺炎疫情之后农产品滞销难题尽一份力。</p><p>我们的生鲜电商平台目前已经具备了与同行业竞争的基本条件：1.考虑了手机客户端三级分销理念，使每个人都有做主权力；2.具备存储能力强的数据库：容纳更多的客户与商家数据；3.配有稳定的合作企业：云鸟科技与菜鸟网络；4.成熟的顾客喜好分析算法：精准的为购买过的顾客提供喜好推荐等。</p>p>',
            }
          ],
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '4.8'
            }, {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '3.2'
            }, {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '2.2'
            },
          ]
        },
        {
          src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/49',
          name: '职员2',
          phone_num: '13700000000',
          sex: '男',
          position: 'UFO',
          enter_time: '2021.2',
          salary: '20020',
          score: '4.8',
          skills: '<p>掌握C、Java、Python等语言，参加竞赛以C++为主，日常开发以Python为主</p><p>掌握爬虫、数据分析、数据挖掘等技术，借助相关技术抓取教务系统接口开发相关网站为同学提供便利</p><p>掌握H5、CSS3等技术，独自开发多个网站，其中包括完整电商网站、信息发布网站等，后端使用Django开发</p>',
          exps: [
            {
              xueli: '本科',
              schoolName: '山东财经大学',
              majorName: '计算机科学与技术',
            },
            {
              xueli: '研究生',
              schoolName: '清华大学',
              majorName: '计算机科学与技术',
            },
          ],
          items: []
        },
        {
          src: 'https://himg.bdimg.com/sys/portrait/hotitem/wildkid/49',
          name: '职员3',
          phone_num: '13700000000',
          sex: '男',
          position: 'CEO',
          enter_time: '2021.2',
          salary: '20000',
          score: '4.2',
          skills: '<p>掌握C、Java、Python等语言，参加竞赛以C++为主，日常开发以Python为主</p><p>掌握爬虫、数据分析、数据挖掘等技术，借助相关技术抓取教务系统接口开发相关网站为同学提供便利</p><p>掌握H5、CSS3等技术，独自开发多个网站，其中包括完整电商网站、信息发布网站等，后端使用Django开发</p>',
          exps: [
            {
              xueli: '本科',
              schoolName: '山东财经大学',
              majorName: '计算机科学与技术',
            },
            {
              xueli: '研究生',
              schoolName: '清华大学',
              majorName: '计算机科学与技术',
            },
          ],
          items: [],
          rate_detail: [
            {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '4.8'
            }, {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '3.2'
            }, {
              timestamp: '2018/4/12',
              detail: '<p>王小虎 提交于 2018/4/12 20:46</p><p>王小虎 提交于 2018/4/12 20:45</p>',
              score: '2.2'
            },
          ]
        },
      ],
      show_data: [],
      alert_show: true,
      new_rate: {},
      third_dialog_alert_show: true,
      value: ''
    }
  },
  setup(prop, context) {
    context.emit('title', '公司职工')
  },
  methods: {
    avatar_style(col) {
      if (col.columnIndex === 0) return 'text-align:center'
    },
    handleEdit(index, row) {
      this.first_dialog = true
      this.show_data = row
    },
    // eslint-disable-next-line no-unused-vars
    handleDelete(index, row) {
      this.$confirm('此操作将删除该职工, 是否继续?', '确认框', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.tableData.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    close_alert() {
      this.alert_show = false
    },
    submit_data() {
      const date = new Date()
      this.new_rate.timestamp = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDay() + ' ' + date.getHours() + ':' + date.getMinutes()
      this.$confirm('确认无误后提交新评价, 是否继续?', '确认框', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '提交成功!',
        });
        const copy_data = JSON.parse(JSON.stringify(this.new_rate))
        this.show_data.rate_detail.splice(0, 0, copy_data)
        this.third_dialog = false
        this.new_rate.detail = ''
        this.new_rate.score = 0
        this.new_rate.timestamp = ''
        this.updateScore()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交',
        });
      });
    },
    updateScore() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].score = 0
        if (!this.tableData[i].rate_detail || this.tableData[i].rate_detail.length === 0) {
          this.tableData[i].rate_detail = []
        } else {
          for (let j = 0; j < this.tableData[i].rate_detail.length; j++) {
            this.tableData[i].score += parseFloat(this.tableData[i].rate_detail[j].score)
          }
          this.tableData[i].score /= this.tableData[i].rate_detail.length
        }
      }
    }
  },
  components: {
    edit_panel
  },
  mounted() {
    this.updateScore()
  }
}
</script>

<style scoped>
.show_dialog .el-dialog {
  margin-bottom: 0;
}

.show_dialog_data {
  margin: 0 0 10px;
}

.show_dialog_data ul {
  list-style: none;
  height: 16px;
  margin: 10px 0;
}

.show_dialog_data li {
  float: left;
  line-height: 16px;
  font-size: 13px;
  display: inline-block;
  padding: 0 20px;
  border-right: 1px solid #d7d7d7;
}

.show_dialog_data li:first-child {
  padding-left: 0;
}

.show_dialog_data li:last-child {
  border: none;
}


.item_card >>> .el-card__header {
  padding: 8px 20px;
}

.item_card >>> .el-rate__item i, .item_card >>> .el-rate__text {
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 0;
}

</style>

<style>

.third_dialog .el-dialog__body {
  padding: 20px 10px;
}

.tox.tox-silver-sink.tox-tinymce-aux {
  z-index: 9999;
}

.tox-statusbar__branding {
  display: none;
}
</style>
